.nav-list {
  justify-self: center;
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 65px;
  font-weight: 500;
  font-size: 18px;

  // Подключеаем миксин с медиазапросом (см. в _vars.scss)
  @include tablet {
    display: none;
  }
}

.nav-list__item {
  position: relative;
}

.nav-list__link {
  transition: opacity 0.1s ease-in;

  &:hover {
    opacity: 0.7;
  }
}

.nav-list__link--dropdown {
  display: flex;
  align-items: center;
  gap: 8px;

  &::after {
    content: url(./../img/icons/arrow-down.svg);
    height: 18px;
  }
}

.nav-list__sub-nav {
  // Делаем его изначально невидимым. Если установить display:none, плавного появления не получиться
  opacity: 0;
  width: 160px;
  // Прописываем, чтобы все, что находиться в блоке не реагировало на мышь
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  // Чтобы он изначально находился ниже на 50% своей высоты
  transform: translate(0%, 50%);
  // Чтобы он медленно появился поднимаясь
  transition: all 0.2s ease-in;
}

.nav-list__item:hover .nav-list__sub-nav {
  // Прописываем, чтобы все что в блоке реагировало на мышь
  pointer-events: all;
  // Делаем его видимым
  opacity: 1;
  // Чтобы он поднялся
  transform: translate(0%, 0%);
}

// @include tablet {
//   .nav-list {
//     display: none;
//   }
// }